<template>
	<view class="page-container">
		<!-- 顶部导航区 -->
		<view class="nav-bar">
			<text class="nav-title">{{ farmData.name }}</text>
			<view class="nav-actions">
				<uni-icons type="compose" size="24" color="#333" @click="showEditModal" />
				<uni-icons type="more" size="24" color="#333" @click="showActionSheet" />
			</view>
		</view>

		<scroll-view scroll-y class="content-container" @scrolltolower="loadMoreRecords">
			<!-- 加载状态 -->
			<view v-if="loading" class="loading-container">
				<uni-icons type="spinner-cycle" size="30" color="#4CD964" />
				<text>数据加载中...</text>
			</view>

			<!-- 农田基础信息卡片 -->
			<view v-if="!loading" class="info-card">
				<view class="farm-header">
					<text class="farm-name">{{ farmData.title }}</text>
					<uni-icons type="location" size="20" color="#666" />
					<text class="farm-location">{{ farmData.location }}</text>
				</view>

				<view class="farm-details">
					<view class="detail-item">
						<uni-icons type="square" size="16" color="#666" />
						<text class="detail-text">面积: {{ farmData.area }}亩</text>
					</view>
					<view class="detail-item">
						<uni-icons type="leaf" size="16" color="#666" />
						<text class="detail-text">土壤类型: {{ farmData.soilType }}</text>
					</view>
					<view class="detail-item" v-if="showNotes">
						<uni-icons type="info" size="16" color="#666" />
						<text class="detail-text">备注: {{ farmData.notes }}</text>
					</view>
					<view class="toggle-notes" @click="toggleNotes">
						<text>{{ showNotes ? '收起备注' : '展开备注' }}</text>
						<uni-icons :type="showNotes ? 'up' : 'down'" size="16" color="#666" />
					</view>
				</view>
			</view>

			<!-- 当前作物信息区 -->
			<view v-if="!loading && cropData.name" class="crop-card">
				<swiper class="crop-swiper" :autoplay="true" :interval="3000">
					<swiper-item v-for="(image, index) in cropData.images" :key="index">
						<image class="crop-image" :src="image" mode="aspectFill" @click="previewImage(index)" />
					</swiper-item>
				</swiper>

				<view class="crop-info">
					<text class="crop-name">{{ cropData.name }} ({{ cropData.variety }})</text>
					<view class="progress-container">
						<text class="progress-text">生长周期: {{ cropData.startDate }} 至 {{ cropData.endDate }}</text>
						<progress class="progress-bar" :percent="cropData.progress" activeColor="#4CD964" />
					</view>
					<view class="countdown">
						<uni-icons type="calendar" size="16" color="#666" />
						<text class="countdown-text">预计{{ cropData.harvestDays }}天后收获</text>
					</view>
				</view>
			</view>

			<!-- 农田状态标记栏 -->
			<scroll-view v-if="!loading" scroll-x class="status-scroll">
				<view class="status-container">
					<view v-for="status in farmStatusOptions" :key="status.value" class="status-tag"
						:class="{ active: currentStatus === status.value }" @click="changeStatus(status.value)">
						<uni-icons :type="status.icon" size="20"
							:color="currentStatus === status.value ? '#4CD964' : '#666'" />
						<text>{{ status.label }}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 作物生长记录区 -->
			<view v-if="!loading" class="records-card">
				<view class="section-header">
					<text class="section-title">生长记录</text>
					<uni-button type="primary" size="mini" @click="showAddRecord">添加记录</uni-button>
				</view>

				<view class="timeline">
					<view v-for="(record, index) in records" :key="index" class="timeline-item">
						<view class="timeline-dot"></view>
						<view class="timeline-content">
							<view class="record-header">
								<text class="record-date">{{ record.date }}</text>
								<uni-icons :type="record.typeIcon" size="20" color="#666" />
								<text class="record-type">{{ record.type }}</text>
							</view>
							<text class="record-desc">{{ record.description }}</text>
							<view v-if="record.data" class="record-data">
								<text>{{ record.data }}</text>
							</view>
							<view v-if="record.images && record.images.length" class="record-images">
								<image v-for="(img, imgIndex) in record.images" :key="imgIndex" :src="img"
									mode="aspectFill" class="record-image"
									@click="previewImageInRecord(index, imgIndex)" />
							</view>
						</view>
					</view>
				</view>

				<view v-if="loadingMore" class="loading-more">
					<uni-icons type="spinner-cycle" size="20" color="#666" />
					<text>加载中...</text>
				</view>
			</view>

			<!-- 农事提醒模块 -->
			<view v-if="!loading" class="reminders-card">
				<view class="section-header">
					<text class="section-title">农事提醒</text>
					<uni-button type="default" size="mini" @click="showAddReminder">添加提醒</uni-button>
				</view>

				<view v-for="(reminder, index) in recentReminders" :key="index" class="reminder-item">
					<view class="reminder-content">
						<uni-icons type="notification" size="20" color="#FF9500" />
						<text class="reminder-text">{{ reminder.date }} {{ reminder.content }}</text>
					</view>
					<uni-icons :type="reminder.completed ? 'checkbox-filled' : 'circle'" size="20"
						:color="reminder.completed ? '#4CD964' : '#666'" @click="toggleReminderStatus(index)" />
				</view>

				<view class="view-all" @click="viewAllReminders">
					<text>查看全部提醒</text>
					<uni-icons type="arrowright" size="16" color="#666" />
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view v-if="!loading" class="action-bar">
			<uni-button type="default" size="mini" @click="showAddReminder">
				<uni-icons type="notification" size="20" color="#666" />
				<text>设置提醒</text>
			</uni-button>
			<uni-button type="primary" size="mini" @click="showAddRecord">
				<uni-icons type="plus" size="20" color="#fff" />
				<text>添加记录</text>
			</uni-button>
		</view>

		<!-- 编辑农田模态框 -->
		<uni-popup ref="editModal" type="center" :is-mask-click="false">
			<view class="edit-modal">
				<view class="modal-header">
					<text class="modal-title">编辑农田信息</text>
					<uni-icons type="close" size="24" color="#999" @click="closeEditModal" />
				</view>

				<scroll-view scroll-y class="modal-content">
					<view class="form-item">
						<text class="form-label">农田名称</text>
						<uni-easyinput v-model="editForm.name" placeholder="请输入农田名称" />
					</view>

					<view class="form-item">
						<text class="form-label">所在位置</text>
						<uni-easyinput v-model="editForm.location" placeholder="请输入农田位置" />
					</view>

					<view class="form-item">
						<text class="form-label">农田面积(亩)</text>
						<uni-easyinput type="number" v-model="editForm.area" placeholder="请输入农田面积" />
					</view>

					<view class="form-item">
						<text class="form-label">土壤类型</text>
						<uni-easyinput v-model="editForm.soilType" placeholder="请输入土壤类型" />
					</view>

					<view class="form-item">
						<text class="form-label">备注信息</text>
						<uni-easyinput type="textarea" v-model="editForm.notes" placeholder="请输入备注信息" />
					</view>

					<view class="form-section-title">作物信息</view>

					<view class="form-item">
						<text class="form-label">作物名称</text>
						<uni-easyinput v-model="editForm.cropName" placeholder="请输入作物名称" />
					</view>

					<view class="form-item">
						<text class="form-label">作物品种</text>
						<uni-easyinput v-model="editForm.cropVariety" placeholder="请输入作物品种" />
					</view>

					<view class="form-item">
						<text class="form-label">开始日期</text>
						<uni-datetime-picker type="date" v-model="editForm.cropStartDate" />
					</view>

					<view class="form-item">
						<text class="form-label">结束日期</text>
						<uni-datetime-picker type="date" v-model="editForm.cropEndDate" />
					</view>

					<view class="form-item">
						<text class="form-label">生长进度(%)</text>
						<uni-easyinput type="number" v-model="editForm.cropProgress" placeholder="请输入生长进度" />
					</view>
				</scroll-view>

				<view class="modal-footer">
					<uni-button type="default" size="mini" @click="closeEditModal">取消</uni-button>
					<uni-button type="primary" size="mini" @click="saveFarmData">保存</uni-button>
				</view>
			</view>
		</uni-popup>

		<!-- 添加记录模态框 -->
		<uni-popup ref="addRecordModal" type="bottom">
			<view class="record-modal">
				<view class="modal-header">
					<text class="modal-title">添加农事记录</text>
					<uni-icons type="close" size="24" color="#999" @click="closeAddRecordModal" />
				</view>

				<scroll-view scroll-y class="modal-content">
					<view class="form-item">
						<text class="form-label">记录类型</text>
						<picker :value="recordForm.typeIndex" :range="recordTypes" range-key="label"
							@change="changeRecordType">
							<view class="picker">
								<text>{{ recordTypes[recordForm.typeIndex].label }}</text>
								<uni-icons type="arrowdown" size="16" color="#666" />
							</view>
						</picker>
					</view>

					<view class="form-item">
						<text class="form-label">记录日期</text>
						<uni-datetime-picker type="datetime" v-model="recordForm.date" />
					</view>

					<view class="form-item">
						<text class="form-label">详细描述</text>
						<uni-easyinput type="textarea" v-model="recordForm.description" placeholder="请输入记录描述" />
					</view>

					<view class="form-item">
						<text class="form-label">相关数据</text>
						<uni-easyinput v-model="recordForm.data" placeholder="如：施肥量10kg，浇水20L等" />
					</view>

					<view class="form-item">
						<text class="form-label">添加图片</text>
						<view class="image-uploader">
							<view v-for="(img, index) in recordForm.images" :key="index" class="image-preview">
								<image :src="img" class="preview-image" mode="aspectFill"></image>
								<view class="delete-btn" @click="removeRecordImage(index)">
									<uni-icons type="closeempty" size="16" color="#fff"></uni-icons>
								</view>
							</view>
							<view v-if="recordForm.images.length < 4" class="upload-btn" @click="chooseRecordImage">
								<uni-icons type="plusempty" size="24" color="#666"></uni-icons>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="modal-footer">
					<uni-button type="default" size="mini" @click="closeAddRecordModal">取消</uni-button>
					<uni-button type="primary" size="mini" @click="saveRecord">保存记录</uni-button>
				</view>
			</view>
		</uni-popup>

		<!-- 添加提醒模态框 -->
		<uni-popup ref="addReminderModal" type="center">
			<view class="reminder-modal">
				<view class="modal-header">
					<text class="modal-title">{{ reminderForm.id ? '编辑提醒' : '添加农事提醒' }}</text>
					<uni-icons type="close" size="24" color="#999" @click="closeAddReminderModal" />
				</view>

				<scroll-view scroll-y class="modal-content">
					<view class="form-item">
						<text class="form-label">提醒内容</text>
						<uni-easyinput type="textarea" v-model="reminderForm.content" placeholder="请输入提醒内容" />
					</view>

					<view class="form-item">
						<text class="form-label">提醒日期</text>
						<uni-datetime-picker type="datetime" v-model="reminderForm.date" />
					</view>

					<view class="form-item">
						<text class="form-label">提前提醒</text>
						<view class="reminder-options">
							<view v-for="(option, index) in reminderOptions" :key="index" class="reminder-option"
								:class="{ active: reminderForm.advance === option.value }"
								@click="reminderForm.advance = option.value">
								<text>{{ option.label }}</text>
							</view>
						</view>
					</view>

					<view class="form-item">
						<text class="form-label">重复提醒</text>
						<view class="reminder-options">
							<view v-for="(repeat, index) in repeatOptions" :key="index" class="reminder-option"
								:class="{ active: reminderForm.repeat === repeat.value }"
								@click="reminderForm.repeat = repeat.value">
								<text>{{ repeat.label }}</text>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="modal-footer">
					<uni-button type="default" size="mini" @click="closeAddReminderModal">取消</uni-button>
					<uni-button type="primary" size="mini" @click="saveReminder">保存提醒</uni-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import uniDatetimePicker from "@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"

	// 定义响应式数据
	const loading = ref(true)
	const farmData = ref({})
	const cropData = ref({})
	const farmStatusOptions = ref([])
	const currentStatus = ref('normal')
	const records = ref([])
	const recentReminders = ref([])
	const showNotes = ref(false)
	const loadingMore = ref(false)

	// 编辑相关数据
	const editModal = ref(null) // 编辑模态框引用
	const addRecordModal = ref(null) // 添加记录模态框引用
	const addReminderModal = ref(null) // 添加提醒模态框引用
	const editForm = ref({
		name: '',
		location: '',
		area: '',
		soilType: '',
		notes: '',
		cropName: '',
		cropVariety: '',
		cropStartDate: '',
		cropEndDate: '',
		cropProgress: ''
	})

	// 记录表单数据
	const recordForm = ref({
		typeIndex: 0,
		date: new Date().toISOString().split('T')[0],
		description: '',
		data: '',
		images: []
	})

	// 提醒表单数据
	const reminderForm = ref({
		id: null,
		content: '',
		date: new Date().toISOString().split('T')[0],
		advance: 0,
		repeat: 'none',
		completed: false
	})

	// 记录类型选项
	const recordTypes = ref([{
			label: '播种',
			icon: 'plus',
			value: 'sowing'
		},
		{
			label: '施肥',
			icon: 'compose',
			value: 'fertilizing'
		},
		{
			label: '浇水',
			icon: 'water',
			value: 'watering'
		},
		{
			label: '除草',
			icon: 'trash',
			value: 'weeding'
		},
		{
			label: '病虫害',
			icon: 'flag',
			value: 'pest'
		},
		{
			label: '收获',
			icon: 'shop',
			value: 'harvest'
		},
		{
			label: '其他',
			icon: 'more',
			value: 'other'
		}
	])

	// 提醒选项
	const reminderOptions = ref([{
			label: '不提醒',
			value: 0
		},
		{
			label: '提前1小时',
			value: 1
		},
		{
			label: '提前1天',
			value: 24
		},
		{
			label: '提前3天',
			value: 72
		}
	])

	// 重复选项
	const repeatOptions = ref([{
			label: '不重复',
			value: 'none'
		},
		{
			label: '每天',
			value: 'daily'
		},
		{
			label: '每周',
			value: 'weekly'
		},
		{
			label: '每月',
			value: 'monthly'
		}
	])

	const farmId = ref('') // 当前农田ID

	// 从JSON Server获取数据
	const fetchData = (id) => {
		farmId.value = id
		// 获取农田基础数据
		uni.request({
			url: `http://localhost:3000/farmDetails/${id}`,
			method: 'GET',
			success: (res) => {
				if (res.statusCode === 200) {
					const data = res.data
					farmData.value = {
						title: data.title || '农田信息',
						name: data.name || '未命名农田',
						location: data.location || '位置未知',
						area: data.area || 0,
						soilType: data.soilType || '未知土壤类型',
						notes: data.notes || ''
					}

					if (data.currentCrop) {
						cropData.value = {
							name: data.currentCrop.name || '未命名作物',
							variety: data.currentCrop.variety || '',
							images: data.currentCrop.images || [],
							startDate: data.currentCrop.startDate || '',
							endDate: data.currentCrop.endDate || '',
							progress: data.currentCrop.progress || 0,
							harvestDays: data.currentCrop.harvestDays || 0
						}
					}

					if (data.records) {
						records.value = data.records
					}

					if (data.reminders) {
						recentReminders.value = data.reminders
					}

					currentStatus.value = data.currentStatus || 'normal'

					// 填充编辑表单
					editForm.value = {
						name: data.name || '',
						location: data.location || '',
						area: data.area || '',
						soilType: data.soilType || '',
						notes: data.notes || '',
						cropName: data.currentCrop?.name || '',
						cropVariety: data.currentCrop?.variety || '',
						cropStartDate: data.currentCrop?.startDate || '',
						cropEndDate: data.currentCrop?.endDate || '',
						cropProgress: data.currentCrop?.progress || ''
					}
				}
			},
			fail: (err) => {
				console.error('请求失败:', err)
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				})
			}
		})

		// 获取状态选项数据
		uni.request({
			url: 'http://localhost:3000/farmStatusOptions',
			method: 'GET',
			success: (res) => {
				if (res.statusCode === 200) {
					farmStatusOptions.value = res.data
				}
			},
			complete: () => {
				loading.value = false
			}
		})
	}

	// 页面加载时获取数据
	onLoad((options) => {
		if (options && options.id) {
			fetchData(options.id)
		} else {
			uni.showToast({
				title: '缺少农田ID参数',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	})

	// 方法定义
	const handleBack = () => {
		uni.navigateBack()
	}

	const showEditModal = () => {
		if (editModal.value) {
			editModal.value.open()
		}
	}

	const closeEditModal = () => {
		if (editModal.value) {
			editModal.value.close()
		}
	}

	// 显示添加记录模态框
	const showAddRecord = () => {
		// 重置表单
		recordForm.value = {
			typeIndex: 0,
			date: new Date().toISOString().split('T')[0],
			description: '',
			data: '',
			images: []
		}
		if (addRecordModal.value) {
			addRecordModal.value.open()
		}
	}

	// 关闭添加记录模态框
	const closeAddRecordModal = () => {
		if (addRecordModal.value) {
			addRecordModal.value.close()
		}
	}

	// 显示添加提醒模态框
	const showAddReminder = () => {
		// 重置表单
		reminderForm.value = {
			id: null,
			content: '',
			date: new Date().toISOString().split('T')[0],
			advance: 0,
			repeat: 'none',
			completed: false
		}
		if (addReminderModal.value) {
			addReminderModal.value.open()
		}
	}

	// 关闭添加提醒模态框
	const closeAddReminderModal = () => {
		if (addReminderModal.value) {
			addReminderModal.value.close()
		}
	}

	// 更改记录类型
	const changeRecordType = (e) => {
		recordForm.value.typeIndex = e.detail.value
	}

	// 选择记录图片
	const chooseRecordImage = () => {
		uni.chooseImage({
			count: 4 - recordForm.value.images.length,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				// 模拟上传过程
				uni.showLoading({
					title: '上传中...'
				})
				setTimeout(() => {
					recordForm.value.images = [...recordForm.value.images, ...res.tempFilePaths]
					uni.hideLoading()
				}, 1000)
			}
		})
	}

	// 移除记录图片
	const removeRecordImage = (index) => {
		recordForm.value.images.splice(index, 1)
	}

	const saveFarmData = () => {
		// 构造要保存的数据
		const updatedData = {
			...farmData.value,
			name: editForm.value.name,
			location: editForm.value.location,
			area: Number(editForm.value.area),
			soilType: editForm.value.soilType,
			notes: editForm.value.notes,
			currentCrop: {
				...cropData.value,
				name: editForm.value.cropName,
				variety: editForm.value.cropVariety,
				startDate: editForm.value.cropStartDate,
				endDate: editForm.value.cropEndDate,
				progress: Number(editForm.value.cropProgress)
			}
		}

		// 发送PUT请求更新数据
		uni.request({
			url: `http://localhost:3000/farmDetails/${farmId.value}`,
			method: 'PUT',
			data: updatedData,
			success: (res) => {
				if (res.statusCode === 200) {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					// 更新本地数据
					farmData.value = {
						...farmData.value,
						name: editForm.value.name,
						location: editForm.value.location,
						area: Number(editForm.value.area),
						soilType: editForm.value.soilType,
						notes: editForm.value.notes
					}

					cropData.value = {
						...cropData.value,
						name: editForm.value.cropName,
						variety: editForm.value.cropVariety,
						startDate: editForm.value.cropStartDate,
						endDate: editForm.value.cropEndDate,
						progress: Number(editForm.value.cropProgress)
					}

					closeEditModal()
				} else {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				}
			},
			fail: (err) => {
				console.error('保存失败:', err)
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				})
			}
		})
	}

	// 保存记录
	const saveRecord = () => {
		if (!recordForm.value.description) {
			uni.showToast({
				title: '请填写记录描述',
				icon: 'none'
			})
			return
		}

		const newRecord = {
			id: Date.now(),
			date: recordForm.value.date,
			type: recordTypes.value[recordForm.value.typeIndex].label,
			typeIcon: recordTypes.value[recordForm.value.typeIndex].icon,
			description: recordForm.value.description,
			data: recordForm.value.data,
			images: recordForm.value.images
		}

		// 添加到记录列表
		records.value.unshift(newRecord)

		// 更新服务器数据
		updateFarmRecords()

		uni.showToast({
			title: '记录添加成功',
			icon: 'success'
		})

		closeAddRecordModal()
	}

	// 保存提醒
	const saveReminder = () => {
		if (!reminderForm.value.content) {
			uni.showToast({
				title: '请填写提醒内容',
				icon: 'none'
			})
			return
		}

		if (!reminderForm.value.date) {
			uni.showToast({
				title: '请选择提醒日期',
				icon: 'none'
			})
			return
		}

		const newReminder = {
			id: reminderForm.value.id || Date.now(),
			content: reminderForm.value.content,
			date: reminderForm.value.date,
			advance: reminderForm.value.advance,
			repeat: reminderForm.value.repeat,
			completed: reminderForm.value.completed
		}

		if (reminderForm.value.id) {
			// 更新现有提醒
			const index = recentReminders.value.findIndex(r => r.id === reminderForm.value.id)
			if (index !== -1) {
				recentReminders.value.splice(index, 1, newReminder)
			}
		} else {
			// 添加新提醒
			recentReminders.value.unshift(newReminder)
		}

		// 更新服务器数据
		updateFarmReminders()

		uni.showToast({
			title: reminderForm.value.id ? '提醒更新成功' : '提醒添加成功',
			icon: 'success'
		})

		closeAddReminderModal()
	}

	// 更新农田记录到服务器
	const updateFarmRecords = () => {
		uni.request({
			url: `http://localhost:3000/farmDetails/${farmId.value}`,
			method: 'PATCH',
			data: {
				records: records.value
			},
			success: (res) => {
				if (res.statusCode !== 200) {
					console.error('更新记录失败:', res)
				}
			}
		})
	}

	// 更新农田提醒到服务器
	const updateFarmReminders = () => {
		uni.request({
			url: `http://localhost:3000/farmDetails/${farmId.value}`,
			method: 'PATCH',
			data: {
				reminders: recentReminders.value
			},
			success: (res) => {
				if (res.statusCode !== 200) {
					console.error('更新提醒失败:', res)
				}
			}
		})
	}

	const showActionSheet = () => {
		uni.showActionSheet({
			itemList: ['分享农田', '设为常用', '删除农田'],
			success: (res) => {
				uni.showToast({
					title: `选择了: ${res.tapIndex === 0 ? '分享' : res.tapIndex === 1 ? '设为常用' : '删除'}`,
					icon: 'none'
				})
			}
		})
	}

	const toggleNotes = () => {
		showNotes.value = !showNotes.value
	}

	const changeStatus = (status) => {
		currentStatus.value = status
		uni.showToast({
			title: `状态已更新: ${farmStatusOptions.value.find(item => item.value === status)?.label || status}`,
			icon: 'none'
		})
	}

	const loadMoreRecords = () => {
		if (loadingMore.value) return

		loadingMore.value = true
		setTimeout(() => {
			// 模拟加载更多数据
			records.value.push({
				id: Date.now(),
				date: '2023-09-25 10:00',
				type: '整地',
				typeIcon: 'settings',
				description: '土地翻耕平整',
				data: '深度: 25cm, 机械: 小型拖拉机',
				images: []
			})
			loadingMore.value = false
		}, 1000)
	}

	const previewImage = (index) => {
		uni.previewImage({
			current: index,
			urls: cropData.value.images
		})
	}

	const previewImageInRecord = (recordIndex, imgIndex) => {
		const urls = records.value[recordIndex].images
		uni.previewImage({
			current: imgIndex,
			urls: urls
		})
	}

	const toggleReminderStatus = (index) => {
		recentReminders.value[index].completed = !recentReminders.value[index].completed
		updateFarmReminders()
	}

	const viewAllReminders = () => {
		uni.showToast({
			title: '查看全部提醒',
			icon: 'none'
		})
	}
</script>

<style>
	/* 页面基础样式 */
	.page-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.nav-title {
		font-size: 18px;
		font-weight: bold;
	}

	.nav-actions {
		display: flex;
		gap: 15px;
	}

	/* 内容区域样式 */
	.content-container {
		flex: 1;
		padding: 15px;
		box-sizing: border-box;

	}

	/* 卡片样式 */
	.info-card,
	.crop-card,
	.records-card,
	.reminders-card {
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}

	.farm-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.farm-name {
		font-size: 18px;
		font-weight: bold;
		margin-right: 10px;
	}

	.farm-location {
		color: #666;
		font-size: 14px;
	}

	.farm-details {
		margin-top: 10px;
	}

	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.detail-text {
		margin-left: 5px;
		font-size: 14px;
		color: #333;
	}

	.toggle-notes {
		display: flex;
		align-items: center;
		color: #666;
		font-size: 13px;
		margin-top: 5px;
	}

	/* 作物卡片样式 */
	.crop-swiper {
		height: 200px;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.crop-image {
		width: 100%;
		height: 100%;
	}

	.crop-info {
		padding: 10px 0;
	}

	.crop-name {
		font-size: 16px;
		font-weight: bold;
		display: block;
		margin-bottom: 10px;
	}

	.progress-container {
		margin-bottom: 10px;
	}

	.progress-text {
		font-size: 13px;
		color: #666;
		display: block;
		margin-bottom: 5px;
	}

	.progress-bar {
		width: 100%;
	}

	.countdown {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #666;
	}

	.countdown-text {
		margin-left: 5px;
	}

	/* 状态标记栏 */
	.status-scroll {
		white-space: nowrap;
		margin-bottom: 15px;
	}

	.status-container {
		display: inline-flex;
		padding: 5px 0;
	}

	.status-tag {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		padding: 10px 15px;
		background-color: #f9f9f9;
		border-radius: 20px;
		margin-right: 10px;
		font-size: 12px;
	}

	.status-tag.active {
		background-color: #e8f5e9;
		color: #4CD964;
	}

	/* 记录区域样式 */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
	}

	.timeline {
		position: relative;
		padding-left: 20px;
	}

	.timeline::before {
		content: '';
		position: absolute;
		left: 6px;
		top: 0;
		bottom: 0;
		width: 2px;
		background-color: #e0e0e0;
	}

	.timeline-item {
		position: relative;
		margin-bottom: 20px;
	}

	.timeline-dot {
		position: absolute;
		left: -20px;
		top: 5px;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: #4CD964;
		z-index: 1;
	}

	.timeline-content {
		background-color: #f9f9f9;
		border-radius: 8px;
		padding: 12px;
	}

	.record-header {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.record-date {
		font-size: 13px;
		color: #666;
		margin-right: 10px;
	}

	.record-type {
		font-size: 14px;
		font-weight: bold;
		margin-left: 5px;
	}

	.record-desc {
		font-size: 14px;
		line-height: 1.5;
		display: block;
		margin-bottom: 8px;
	}

	.record-data {
		font-size: 13px;
		color: #666;
		padding: 5px;
		background-color: #f0f0f0;
		border-radius: 4px;
		margin-bottom: 8px;
	}

	.record-images {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 10px;
	}

	.record-image {
		width: 80px;
		height: 80px;
		border-radius: 5px;
	}

	/* 提醒区域样式 */
	.reminder-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #eee;
	}

	.reminder-content {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.reminder-text {
		margin-left: 10px;
		font-size: 14px;
	}

	.view-all {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px 0 5px;
		color: #666;
		font-size: 14px;
	}

	/* 底部操作栏 */
	.action-bar {
		display: flex;
		justify-content: space-around;
		padding: 10px 15px;
		background-color: #fff;
		border-top: 1px solid #eee;
	}

	/* 模态框样式 */
	.edit-modal,
	.record-modal,
	.reminder-modal {
		width: 100vw;
		max-width: 600px;
		background-color: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #eee;
	}

	.modal-title {
		font-size: 16px;
		font-weight: bold;
	}

	.modal-content {
		max-height: 60vh;
		padding: 15px;
		width: 93%;

	}

	.form-item {
		margin-bottom: 15px;
	}

	.form-label {
		display: block;
		margin-bottom: 8px;
		font-size: 14px;
		color: #333;
	}

	.form-section-title {
		font-size: 15px;
		font-weight: bold;
		padding: 10px 0;
		margin-top: 10px;
		border-top: 1px solid #eee;
	}

	.modal-footer {
		display: flex;
		justify-content: flex-end;
		padding: 15px;
		gap: 10px;
		border-top: 1px solid #eee;
	}

	/* 图片上传样式 */
	.image-uploader {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.image-preview,
	.upload-btn {
		width: 80px;
		height: 80px;
		border-radius: 5px;
		background-color: #f9f9f9;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.preview-image {
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}

	.delete-btn {
		position: absolute;
		top: -8px;
		right: -8px;
		width: 20px;
		height: 20px;
		background-color: #ff3b30;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 提醒选项样式 */
	.reminder-options {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 8px;
	}

	.reminder-option {
		padding: 8px 15px;
		background-color: #f0f0f0;
		border-radius: 20px;
		font-size: 13px;
	}

	.reminder-option.active {
		background-color: #e8f5e9;
		color: #4CD964;
	}

	/* 加载状态 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 0;
	}

	.loading-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 15px;
		color: #666;
	}
</style>